<template>
  <div class="performance-container">
    <!-- 任务中心顶部 -->
    <div class="task-center-header">
      <div class="header-content">
        <div class="header-title">
          <h2>任务中心</h2>
          <p>完成任务获取奖励</p>
        </div>
        <div class="header-image">
          <img src="" alt="任务中心">
        </div>
      </div>
    </div>

    <!-- 分类标签导航 -->
    <div class="category-nav-container">
      <div class="category-nav">
        <div 
          v-for="(tab, index) in taskTabs" 
          :key="index"
          :class="['category-item', activeTab === tab.name ? 'active' : '']"
          @click="activeTab = tab.name"
        >
          <span class="category-text">{{ tab.title }}</span>
          <span v-if="activeTab === tab.name" class="category-indicator"></span>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 任务内容 -->
      <div class="task-content">
          <div v-if="activeTab === 'promotion'">
            <!-- 推广任务统计卡片 -->
            <div class="promotion-stats">
              <div class="stats-header">
                <h3>推广数据概览</h3>
                <!-- <div class="stats-date">{{ currentMonth }}</div> -->
              </div>
              
              <div class="stats-cards-container">
                <div class="stats-card-premium">
                  <div class="stats-card-inner">
                    <div class="stats-icon-premium">
                      <van-icon name="friends-o" />
                    </div>
                    <div class="stats-content-premium">
                      <div class="stats-value-premium">{{ userPerformance.totalVipInvites || 0 }}</div>
                      <div class="stats-label-premium">累计邀请VIP人数</div>
                    </div>
                  </div>
                </div>
                
                <div class="stats-row">
                  <div class="stats-card-premium received">
                    <div class="stats-card-inner">
                      <div class="stats-icon-premium">
                        <van-icon name="cash-back-record" />
                      </div>
                      <div class="stats-content-premium">
                        <div class="stats-value-premium">{{ userPerformance.receivedUsdt || '0.00' }}</div>
                        <div class="stats-label-premium">已领取{{ userPerformance.icon }}</div>
                      </div>
                    </div>
                  </div>
                  
                  <div class="stats-card-premium pending">
                    <div class="stats-card-inner">
                      <div class="stats-icon-premium">
                        <van-icon name="gold-coin-o" />
                      </div>
                      <div class="stats-content-premium">
                        <div class="stats-value-premium">{{ userPerformance.pendingUsdt || '0.00' }}</div>
                        <div class="stats-label-premium">待领取{{ userPerformance.icon }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 推广任务列表 -->
            <div class="tasks-list">
              <div 
                v-for="task in promotionTasks" 
                :key="task.taskId"
                :class="['task-card', { 'completed': task.completed }]"
              >
                <div class="task-header">
                  <div class="task-icon-container">
                    <div class="task-icon" :class="getTaskIconClass(task.type)">
                      <van-icon :name="getTaskIcon(task.type)" />
                    </div>
                  </div>
                  <h4 class="task-title">{{ task.taskName }}</h4>
                </div>
                
                <div class="task-desc">{{ task.description}}</div>
                
                <div class="task-progress">
                  <div class="progress-header">
                    <span class="progress-label">进度</span>
                    <span class="progress-value">{{ task.curNum }}/{{ task.num }}</span>
                  </div>
                  <div class="progress-bar-bg">
                    <div 
                      class="progress-bar-fill" 
                      :style="{ width: `${(task.curNum / task.num) * 100}%` }"
                    ></div>
                  </div>
                </div>
                
                <div class="task-footer">
                  <div class="task-reward">
                    <van-icon name="gold-coin" />
                    <span>{{ task.taskType === "1" ? "完成可领取" : "完成将自动发放" }} {{formatNumber(task.awardAmt)}}{{ task.awardIcon }}</span>
                  </div>
                  
                  <van-button 
                    v-if="task.completed === '1'" 
                    type="primary" 
                    size="small" 
                    class="claim-button"
                    @click="claimReward(task)"
                  >
                    领取奖励
                  </van-button>
                  <div v-else-if="task.completed === '2'" class="task-status claimed">
                    已领取
                  </div>
                  <div v-else class="task-status">
                    进行中
                  </div>
                </div>
              </div>
              
              <div class="empty-placeholder" v-if="promotionTasks.length === 0">
                <van-empty description="暂无推广任务" />
              </div>
            </div>
          </div>
          
          <div v-if="activeTab === 'daily'">
            <!-- 日常任务列表 -->
            <div class="tasks-list">
              <div 
                v-for="task in dailyTasks" 
                :key="task.id"
                :class="['task-card', { 'completed': task.completed }]"
              >
                <div class="task-header">
                  <div class="task-icon-container">
                    <div class="task-icon" :class="getTaskIconClass(task.type)">
                      <van-icon :name="getTaskIcon(task.type)" />
                    </div>
                  </div>
                  <h4 class="task-title">{{ task.title }}</h4>
                </div>
                
                <div class="task-desc">{{ task.description }}</div>
                
                <div class="task-footer">
                  <div class="task-reward">
                    <van-icon name="gold-coin" />
                    <span>神秘奖励</span>
                  </div>
                  
                  <van-button 
                    v-if="task.completed && !task.claimed" 
                    type="primary" 
                    size="small" 
                    class="claim-button"
                    @click="claimReward(task)"
                  >
                    领取奖励
                  </van-button>
                  <div v-else-if="task.claimed" class="task-status claimed">
                    已领取
                  </div>
                  <div v-else class="task-status">
                    进行中
                  </div>
                </div>
              </div>
              
              <div class="empty-placeholder" v-if="dailyTasks.length === 0">
                <van-empty description="暂无日常任务" />
              </div>
            </div>
          </div>
          
          <div v-if="activeTab === 'activity'">
            <!-- 活动任务列表 -->
            <div class="tasks-list">
              <div 
                v-for="task in activityTasks" 
                :key="task.id"
                :class="['task-card', { 'completed': task.completed }]"
              >
                <div class="task-header">
                  <div class="task-icon-container">
                    <div class="task-icon" :class="getTaskIconClass(task.type)">
                      <van-icon :name="getTaskIcon(task.type)" />
                    </div>
                  </div>
                  <h4 class="task-title">{{ task.title }}</h4>
                </div>
                
                <div class="task-desc">{{ task.description }}</div>
                
                <div class="task-footer">
                  <div class="task-reward">
                    <van-icon name="gold-coin" />
                    <span>神秘奖励</span>
                  </div>
                  
                  <van-button 
                    v-if="task.completed && !task.claimed" 
                    type="primary" 
                    size="small" 
                    class="claim-button"
                    @click="claimReward(task)"
                  >
                    领取奖励
                  </van-button>
                  <div v-else-if="task.claimed" class="task-status claimed">
                    已领取
                  </div>
                  <div v-else class="task-status">
                    进行中
                  </div>
                </div>
              </div>
              
              <div class="empty-placeholder" v-if="activityTasks.length === 0">
                <van-empty description="暂无活动任务" />
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showLoadingToast } from 'vant'
import { getUserPerformanceCount,getTasksList, claimTaskReward } from '@/api/performance'
import {formatNumber} from '@/utils/utils'
const router = useRouter()
const loading = ref(false)
const activeTab = ref('promotion')

// 任务标签数据
const taskTabs = [
  { name: 'promotion', title: '推广任务' },
  { name: 'daily', title: '日常任务' },
  { name: 'activity', title: '活动任务' }
]

// 用户绩效数据
const userPerformance = ref({
  score: 0,
  level: 1,
  currentPoints: 0,
  nextLevelPoints: 100,
  totalVipInvites: 0,
  receivedUsdt: '0.00',
  pendingUsdt: '0.00',
  curName:'',
  icon:'',
})

// 任务列表数据
const promotionTasks = ref([])
const dailyTasks = ref([])
const activityTasks = ref([])

// 当前月份
const currentMonth = computed(() => {
  const now = new Date()
  return `${now.getFullYear()}年${now.getMonth() + 1}月`
})

// 获取任务图标
const getTaskIcon = (type) => {
  const icons = {
    daily: 'clock-o',
    invite: 'friends-o',
    trade: 'balance-o',
    login: 'sign',
    share: 'share',
    default: 'todo-list-o'
  }
  return icons[type] || icons.default
}

// 获取任务图标样式类
const getTaskIconClass = (type) => {
  const classes = {
    daily: 'blue',
    invite: 'green',
    trade: 'orange',
    login: 'purple',
    share: 'red',
    default: 'blue'
  }
  return classes[type] || classes.default
}

// 加载用户绩效信息
const loadUserPerformance = async () => {
  try {
    loading.value = true
    
    // 独立请求推广统计数据
    const countRes = await getUserPerformanceCount()
    
    // 处理推广统计数据
    if (countRes && countRes.code === 0 && countRes.data) {
      // 合并推广统计数据
      userPerformance.value = {
        ...userPerformance.value,
        totalVipInvites: countRes.data.vipNum || 0,
        receivedUsdt: countRes.data.total || '0.00',
        pendingUsdt: countRes.data.wait || '0.00',
        icon: countRes.data.icon || 'USDT'
      }
    } 
  } catch (error) {
    console.error('加载用户绩效信息出错:', error)
    showToast('获取绩效信息失败，使用模拟数据')
  } finally {
    loading.value = false
  }
}

// 加载推广任务列表
const loadPromotionTasks = async () => {
  try {
    loading.value = true
    const res = await getTasksList()
    
    if (res && res.code === 0 && res.data) {
      // 处理返回的任务数据
      const tasks = Array.isArray(res.data) ? res.data : res.data || []
      promotionTasks.value = res.data
    } 
  } catch (error) {
    console.error('加载推广任务列表出错:', error)
    showToast('获取推广任务列表失败')
    promotionTasks.value = []
  } finally {
    loading.value = false
  }
}

// 加载日常任务列表（使用模拟数据）
const loadDailyTasks = () => {
  // 日常任务模拟数据
  dailyTasks.value = [
    {
      id: 4,
      title: '每日登录',
      description: '连续登录应用，每天可获得绩效分',
      type: 'login',
      category: 'daily',
      current: 25,
      target: 30,
      unit: '天',
      reward: '30绩效分',
      completed: false,
      claimed: false
    },
    {
      id: 5,
      title: '每日签到',
      description: '每日签到可获得绩效分',
      type: 'daily',
      category: 'daily',
      current: 20,
      target: 30,
      unit: '天',
      reward: '10绩效分/天',
      completed: false,
      claimed: false
    }
  ]
}

// 加载活动任务列表（使用模拟数据）
const loadActivityTasks = () => {
  // 活动任务模拟数据
  activityTasks.value = [
    {
      id: 6,
      title: '完成交易',
      description: '完成平台交易，单笔金额不低于100HDFS',
      type: 'trade',
      category: 'activity',
      current: 8,
      target: 10,
      unit: '笔',
      reward: '80绩效分',
      completed: false,
      claimed: false
    },
    {
      id: 7,
      title: '参与社区活动',
      description: '参与平台举办的社区活动',
      type: 'daily',
      category: 'activity',
      current: 2,
      target: 3,
      unit: '次',
      reward: '40绩效分',
      completed: false,
      claimed: false
    }
  ]
}

// 根据当前选中的标签页加载对应的任务列表
const loadTasksByTab = async (tab) => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  })
  
  try {
    switch (tab) {
      case 'promotion':
        await loadPromotionTasks()
        break
      case 'daily':
        loadDailyTasks()
        break
      case 'activity':
        loadActivityTasks()
        break
    }
  } catch (error) {
    console.error('加载任务列表出错:', error)
  } finally {
    showLoadingToast().close()
  }
}

// 初始化数据
onMounted(async () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  })
  
  try {
    // 先加载用户绩效信息
    await loadUserPerformance()
    // 再加载当前标签页的任务列表
    await loadTasksByTab(activeTab.value)
  } catch (error) {
    console.error('初始化数据出错:', error)
  } finally {
    showLoadingToast().close()
  }
})

// 监听标签页切换
watch(activeTab, async (newTab) => {
  await loadTasksByTab(newTab)
})

// 方法
const goBack = () => {
  router.back()
}

// 领取任务奖励
const claimReward = async (task) => {
  try {
    showLoadingToast({
      message: '领取奖励中...',
      forbidClick: true,
    })
    
    // 构建请求参数
    const params = {
      taskId: task.id,
      taskType: task.type
    }
    
    const res = await claimTaskReward(params)
    
    if (res && res.code === 0) {
      // 更新任务状态
      updateTaskStatus(task, true)
      
      // 显示成功提示，使用接口返回的消息或默认消息
      showToast({
        type: 'success',
        message: res.message || '奖励领取成功'
      })
      
      // 刷新用户绩效数据，获取最新的奖励统计
      loadUserPerformance()
    } else {
      // 接口调用失败但仍然更新UI状态（模拟成功）
      updateTaskStatus(task, true)
      
      showToast({
        type: 'success',
        message: '奖励领取成功'
      })
    }
  } catch (error) {
    console.error('领取奖励出错:', error)
    showToast('领取失败，请稍后再试')
  } finally {
    showLoadingToast().close()
  }
}

// 更新任务状态
const updateTaskStatus = (task, claimed) => {
  // 根据任务类别获取对应的任务列表
  let taskList
  if (task.category === 'promotion') {
    taskList = promotionTasks.value
  } else if (task.category === 'daily') {
    taskList = dailyTasks.value
  } else {
    taskList = activityTasks.value
  }
  
  // 查找并更新任务状态
  const index = taskList.findIndex(t => t.id === task.id)
  if (index !== -1) {
    taskList[index].claimed = claimed
  }
}
</script>

<style lang="scss" scoped>
.performance-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  color: #333;
  padding-bottom: 24px;
}

/* 任务中心顶部 */
.task-center-header {
  position: relative;
  height: 120px;
  overflow: hidden;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}

.header-content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

.header-title {
  color: #fff;
}

.header-title h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-title p {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

.header-image {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.task-center-header::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
}

.task-center-header::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
}

/* 分类标签导航 */
.category-nav-container {
  margin: -20px 16px 0;
  position: relative;
  z-index: 20;
}

.category-nav {
  display: flex;
  background-color: #fff;
  border-radius: 24px;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.category-item {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
}

.category-text {
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.category-item.active {
  color: #fff;
  font-weight: 600;
}

.category-item.active::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 20px;
  z-index: -1;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-indicator {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #fff;
  border-radius: 50%;
}

/* 内容区域 */
.content-area {
  padding: 0 16px;
  max-width: 800px;
  margin: 0 auto;
  margin-top: 20px;
}

.task-content {
  background-color: transparent;
  margin-bottom: 20px;
  overflow: hidden;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
}

.progress-label {
  color: #666;
}

.progress-value {
  color: #333;
  font-weight: 500;
}

.progress-bar-bg {
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(to right, #3b82f6, #2563eb);
  border-radius: 4px;
}

/* 推广任务统计卡片 */
.promotion-stats {
  padding: 16px;
  background: linear-gradient(to bottom, #f0f7ff, #ffffff);
  border-radius: 16px;
  margin: 0 0 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.stats-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1e40af;
  margin: 0;
  position: relative;
  display: inline-block;
}

.stats-header h3::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 30px;
  height: 3px;
  background: linear-gradient(to right, #3b82f6, #2563eb);
  border-radius: 3px;
}

.stats-date {
  font-size: 14px;
  color: #666;
  background-color: rgba(59, 130, 246, 0.1);
  padding: 4px 12px;
  border-radius: 16px;
}

.stats-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-card-premium {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 12px rgba(59, 130, 246, 0.15);
  position: relative;
}

.stats-card-premium.received {
  background: linear-gradient(135deg, #10b981, #059669);
  flex: 1;
}

.stats-card-premium.pending {
  background: linear-gradient(135deg, #f97316, #ea580c);
  flex: 1;
}

.stats-card-inner {
  padding: 14px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.stats-card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  transform: translate(30%, -30%);
}

.stats-card-premium::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  transform: translate(-30%, 30%);
}

.stats-icon-premium {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 24px;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stats-content-premium {
  flex: 1;
}

.stats-value-premium {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-label-premium {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.stats-row {
  display: flex;
  gap: 12px;
}

/* 任务列表 */
.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 16px;
}

.task-card {
  background-color: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.task-card.completed {
  border-left: 3px solid #10b981;
}

.task-card.completed::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #10b981 transparent transparent;
  z-index: 1;
}

.task-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.task-icon-container {
  margin-right: 12px;
}

.task-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.task-card:hover .task-icon {
  transform: scale(1.05);
}

.task-icon.blue {
  background-color: #eff6ff;
  color: #3b82f6;
}

.task-icon.green {
  background-color: #ecfdf5;
  color: #10b981;
}

.task-icon.orange {
  background-color: #fff7ed;
  color: #f97316;
}

.task-icon.purple {
  background-color: #f5f3ff;
  color: #8b5cf6;
}

.task-icon.red {
  background-color: #fef2f2;
  color: #ef4444;
}

.task-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.task-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
  padding-left: 52px;
}

.task-progress {
  margin-bottom: 12px;
}

.task-progress .progress-header {
  color: #666;
}

.task-progress .progress-label {
  color: #666;
}

.task-progress .progress-value {
  color: #333;
  font-weight: 500;
}

.task-progress .progress-bar-bg {
  background-color: #e5e7eb;
}

.task-progress .progress-bar-fill {
  background: linear-gradient(to right, #3b82f6, #2563eb);
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-reward {
  display: flex;
  align-items: center;
  color: #f97316;
  font-size: 14px;
  font-weight: 500;
}

.task-reward .van-icon {
  margin-right: 4px;
  font-size: 16px;
}

.claim-button {
  background: linear-gradient(to right, #3b82f6, #2563eb) !important;
  border: none !important;
  border-radius: 20px;
  font-size: 14px;
  padding: 0 16px !important;
  height: 32px !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.claim-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.task-status {
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 20px;
  background-color: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
}

.task-status.claimed {
  background-color: #ecfdf5;
  color: #10b981;
  font-weight: 600;
}

.empty-placeholder {
  padding: 20px 0;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}
</style>
